import homeLogo from "../assets/homeLogo.png"
import moduleLogo from "../assets/moduleLogo.png"
import userAdministratorLogo from "../assets/userAdministratorLogo.png"
import logoutLogo from "../assets/logoutLogo.png"
import { LogoutUser } from "../actions/UserActions"

const StudentSidebarMapping = [
    {
        title: "Home",
        icon: <img src={homeLogo} width={20} height={20} alt=""/>,
        link: "/student/home"
    },
    {
        title: "Modules",
        icon: <img src={moduleLogo} width={20} height={20} alt=""/>,
        link: "/student/module"
    },
    {
        title: "Logout",
        icon: <img src={logoutLogo} width={20} height={20} alt=""/>,
        link: "/"
    }
]

const StaffSidebarMapping = [
    {
        title: "Home",
        icon: <img src={homeLogo} width={20} height={20} alt=""/>,
        link: "/staff/home"
    },
    {
        title: "Modules",
        icon: <img src={moduleLogo} width={20} height={20} alt=""/>,
        link: "/staff/module"
    },
    {
        title: "Logout",
        icon: <img src={logoutLogo} width={20} height={20} alt=""/>,
        link: "/"
    }
]

const AdminSidebarMapping = [
    {
        title: "Home",
        icon: <img src={homeLogo} width={20} height={20} alt=""/>,
        link: "/admin/home"
    },
    {
        title: "Modules",
        icon: <img src={moduleLogo} width={20} height={20} alt=""/>,
        link: "/admin/module"
    },
    {
        title: "User Administrator",
        icon: <img src={userAdministratorLogo} width={20} height={20} alt=""/>,
        link: "/admin/user"
    },
    {
        title: "Logout",
        icon: <img src={logoutLogo} width={20} height={20} alt=""/>,
        link: "/"
    }
]

export const SidebarStudent = () => {
    return (
        <div className="sidebar">
            <ul className="sidebarList">
                <h1 className="logoTitle">Fellowmark.</h1>
                {StudentSidebarMapping.map((val, key) => {
                    return (
                        <li key={key} className="sidebarRow" id={window.location.pathname === val.link ? "active" : ""} onClick={() => {val.link === "/" ? LogoutUser() : window.location.pathname = val.link}}>
                            <div id="icon">{val.icon}</div>
                            <div id="title">{val.title}</div>
                        </li>
                    );
                })}
            </ul>
        </div>
    )
}

export const SidebarStaff = () => {
    return (
        <div className="sidebar">
            <ul className="sidebarList">
                <h1 className="logoTitle">Fellowmark.</h1>
                {StaffSidebarMapping.map((val, key) => {
                    return (
                        <li key={key} className="sidebarRow" id={window.location.pathname === val.link ? "active" : ""} onClick={() => {val.link === "/" ? LogoutUser() : window.location.pathname = val.link}}>
                            <div id="icon">{val.icon}</div>
                            <div id="title">{val.title}</div>
                        </li>
                    );
                })}
            </ul>
        </div>
    )
}

export const SidebarAdmin = () => {
    return (
        <div className="sidebar">
            <ul className="sidebarList">
                <h1 className="logoTitle">Fellowmark.</h1>
                {AdminSidebarMapping.map((val, key) => {
                    return (
                        <li key={key} className="sidebarRow" id={window.location.pathname === val.link ? "active" : ""} onClick={() => {val.link === "/" ? LogoutUser() : window.location.pathname = val.link}}>
                            <div id="icon">{val.icon}</div>
                            <div id="title">{val.title}</div>
                        </li>
                    );
                })}
            </ul>
        </div>
    )
}